| Visualization |

Column

Wave size

Column

Wind speed

| Tables |

Column

Summary

Day Hour Wave_Size_Mean1 Wind_direction
Samedi 16 Novembre 01:00 0.50 Orientation vent Est
Samedi 16 Novembre 04:00 0.50 Orientation vent Est Sud Est
Samedi 16 Novembre 07:00 0.50 Orientation vent Est Sud Est
Samedi 16 Novembre 10:00 0.50 Orientation vent Est Sud Est
Samedi 16 Novembre 13:00 0.50 Orientation vent Sud Est
Samedi 16 Novembre 16:00 0.50 Orientation vent Nord Nord Ouest
Samedi 16 Novembre 19:00 0.40 Orientation vent Nord Nord Ouest
Samedi 16 Novembre 22:00 0.40 Orientation vent Nord
Dimanche 17 Novembre 01:00 0.40 Orientation vent Nord Nord Est
Dimanche 17 Novembre 04:00 0.40 Orientation vent Nord Nord Est
Dimanche 17 Novembre 07:00 0.35 Orientation vent Nord Est
Dimanche 17 Novembre 10:00 0.40 Orientation vent Nord Nord Est
Dimanche 17 Novembre 13:00 0.50 Orientation vent Nord
Dimanche 17 Novembre 16:00 0.60 Orientation vent Nord Ouest
Dimanche 17 Novembre 19:00 0.65 Orientation vent Sud
Dimanche 17 Novembre 22:00 0.70 Orientation vent Sud Ouest
Lundi 18 Novembre 01:00 0.75 Orientation vent Ouest
Lundi 18 Novembre 04:00 0.80 Orientation vent Sud Sud Est
Lundi 18 Novembre 07:00 0.75 Orientation vent Sud
Lundi 18 Novembre 10:00 0.80 Orientation vent Sud
Lundi 18 Novembre 13:00 0.85 Orientation vent Sud
Lundi 18 Novembre 16:00 0.90 Orientation vent Sud Sud Est
Lundi 18 Novembre 19:00 0.90 Orientation vent Sud
Lundi 18 Novembre 22:00 0.85 Orientation vent Sud Ouest
Mardi 19 Novembre 01:00 0.85 Orientation vent Sud Ouest
Mardi 19 Novembre 04:00 0.75 Orientation vent Ouest Sud Ouest
Mardi 19 Novembre 07:00 0.65 Orientation vent Ouest Sud Ouest
Mardi 19 Novembre 10:00 1.15 Orientation vent Ouest Sud Ouest
Mardi 19 Novembre 13:00 1.40 Orientation vent Ouest Sud Ouest
Mardi 19 Novembre 16:00 1.50 Orientation vent Ouest
Mardi 19 Novembre 19:00 1.50 Orientation vent Ouest
Mardi 19 Novembre 22:00 1.00 Orientation vent Nord Ouest
Mercredi 20 Novembre 01:00 3.20 Orientation vent Nord Ouest
Mercredi 20 Novembre 04:00 2.15 Orientation vent Ouest Nord Ouest
Mercredi 20 Novembre 07:00 3.05 Orientation vent Ouest Nord Ouest
Mercredi 20 Novembre 10:00 2.75 Orientation vent Nord Ouest
Mercredi 20 Novembre 13:00 2.50 Orientation vent Nord Ouest
Mercredi 20 Novembre 16:00 2.25 Orientation vent Nord Ouest
Mercredi 20 Novembre 19:00 2.05 Orientation vent Nord Ouest
Mercredi 20 Novembre 22:00 1.85 Orientation vent Nord Nord Ouest
Jeudi 21 Novembre 01:00 1.65 Orientation vent Nord Ouest
Jeudi 21 Novembre 04:00 1.50 Orientation vent Ouest Nord Ouest
Jeudi 21 Novembre 07:00 1.15 Orientation vent Ouest Nord Ouest
Jeudi 21 Novembre 10:00 0.90 Orientation vent Sud Ouest
Jeudi 21 Novembre 13:00 0.35 Orientation vent Est Sud Est
Jeudi 21 Novembre 16:00 4.15 Orientation vent Ouest Sud Ouest
Jeudi 21 Novembre 19:00 3.35 Orientation vent Ouest Nord Ouest
Jeudi 21 Novembre 22:00 2.75 Orientation vent Nord
Vendredi 22 Novembre 01:00 2.40 Orientation vent Nord
Vendredi 22 Novembre 04:00 2.00 Orientation vent Est Nord Est
Vendredi 22 Novembre 07:00 1.45 Orientation vent Est
Vendredi 22 Novembre 10:00 1.65 Orientation vent Est Sud Est
Vendredi 22 Novembre 13:00 2.00 Orientation vent Est Sud Est
Vendredi 22 Novembre 16:00 1.90 Orientation vent Ouest
Vendredi 22 Novembre 19:00 1.50 Orientation vent Ouest
Vendredi 22 Novembre 22:00 1.15 Orientation vent Ouest
1 Measured in meters

Column

Best moment

Day Hour Waves_size Wind_speed1 Wind_direction Date Wave_Size_Mean2
Jeudi 21 Novembre 16:00 3.3 - 5.0 13 Orientation vent Ouest Sud Ouest 2024-11-21 16:00:00 4.15
1 Measured in km/h
2 Measured in meters

Highest wave

The highest wave of the week is 4.15 m, occurring on the following days and times:
Jeudi 21 Novembre à 16:00 heures.

| Quality |

Column

Gauge

Best wave score

The highest sea quality score is 9 pts and and wil next occur on:
Jeudi 21 Novembre à 07:00 heures.

Column

Quality lot

---
title: "Dashboard Surf"
author: "Kevin HAMICI, Celia ZERROUDI, Margot LE CANN"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    source_code: embed
---

```{r setup, include=FALSE}
library(flexdashboard)
library(ggplot2)
library(plotly)
library(gt)
library(gtExtras)
library(knitr)
library(dplyr)
library(dygraphs)

```

| Visualization |
=======================================================================

Column {data-width=500}
-----------------------------------------------------------------------

### Wave size

```{r wave-size-chart}
data <- read.csv("C:/Users/margo/OneDrive - Aix-Marseille Université/Programmation/Projet/data_surf/data_surf/data_surf.csv")
data <- data %>% mutate(Date = as.POSIXct(paste(Day,Hour),format = "%A %d %B %H:%M"))

# Average wave size extraction
#to use the data remove the - and create two new columns to create the Wave_size_mean column
data$Wave_Size_Min <- as.numeric(sub(" - .*", "", data$Waves_size))
data$Wave_Size_Max <- as.numeric(sub(".* - ", "", data$Waves_size))
data$Wave_Size_Mean <- rowMeans(data[, c("Wave_Size_Min", "Wave_Size_Max")], na.rm = TRUE)
data <- subset(data, select = -c(Wave_Size_Min, Wave_Size_Max)) # To remove useless colomn

# 1srt graphic with geom_line
ggplotly(
  ggplot(data, aes(x = Date, y = Wave_Size_Mean)) +
  geom_line(color = "skyblue") +
    labs(title = "Wave size over the time",
       x = "Time",
       y = "Average wave size (meter)")+
  scale_x_datetime(date_breaks = "12 hours", date_labels = "%A %d %H:%M") +
  theme(axis.text.x = element_text(angle = 50, hjust = 1))
  )
#we use scale_x_datetime to display only few hours to make the graph easier to read
```



Column {data-width=500}
-----------------------------------------------------------------------

### Wind speed

```{r wind-speed-chart}
#2nd grpahic with geom_line
ggplotly(
  ggplot(data, aes(x = Date, y = Wind_speed))+
  geom_line(color= "skyblue")+
  labs(title = "Wind speed over the time",
       x = "Time",
       y = "Wind speed (Km/h)")+
  scale_x_datetime(date_breaks = "12 hours", date_labels = "%A %d %H:%M")+
  theme(axis.text.x = element_text(angle = 50, hjust = 1))
)

```




| Tables |
=======================================================================

Column {data-width=500}
-----------------------------------------------------------------------

### Summary

```{r summary-table, echo=FALSE}
#1st table with footnote 
summary_table <- data %>%  
  select(Day, Hour, Wave_Size_Mean, Wind_direction) %>% 
  gt() %>% 
  gt_theme_pff() %>% 
  tab_footnote(footnote = md("Measured in **meters**"),
               locations = cells_column_labels(columns = Wave_Size_Mean))

# Display the table with a scrollable container
htmltools::tags$div(
  style = "overflow-x: auto; max-width: 100%; height: 500px; overflow-y: auto;",
  summary_table
)
```


Column {data-width=500}
-----------------------------------------------------------------------

### Best moment

```{r best-moment, echo=FALSE}
# Second table with the best moment to surf 
best_moments <- data %>% filter(Wave_Size_Mean == max(Wave_Size_Mean))

htmltools::tags$div(
  style = "overflow-x: auto; max-width: 100%; height: 400px; overflow-y: auto;",
  best_moments %>% 
    gt() %>% 
    gt_theme_pff()%>% 
    tab_footnote(footnote = md("Measured in **meters**") ,
               locations = cells_column_labels(columns = Wave_Size_Mean)) %>% 
    tab_footnote(footnote = md("Measured in **km/h**") ,
               locations = cells_column_labels(columns = Wind_speed))
)
```

### Highest wave

```{r highest-wave}
highest_wave <- max(data$Wave_Size_Mean, na.rm = TRUE)

# We use  indices to extract the day and time of the highest wave 
highest_wave_indices <- which(data$Wave_Size_Mean == highest_wave)
days_highest_wave <- data$Day[highest_wave_indices]
hours_highest_wave <- data$Hour[highest_wave_indices]

# Create the output message 
output_message <- paste("The highest wave of the week is", highest_wave, "m, occurring on the following days and times:")

# And we add the dy and the time with a loop for reproducibility
for (i in seq_along(highest_wave_indices)) {
  output_message <- paste(output_message, paste(days_highest_wave[i], "à", hours_highest_wave[i], "heures."), sep = "\n")
}

cat(output_message)
```





| Quality |
=======================================================================

Column {data-width=300}
-----------------------------------------------------------------------

### Gauge

```{r sea-quality-gauge}
# Quality score creation
data$Quality <- 
  ifelse(grepl("Nord", data$`Wind_direction`), 3, 0) +  # +3 if it contains "nord"
  
  # Condition for wave size, with points according to height
  ifelse(data$Wave_Size_Mean > 1.0, 3, 
         ifelse(data$Wave_Size_Mean > 0.75, 2, 
                ifelse(data$Wave_Size_Mean > 0.5, 1, 0))) +
  
  # Same thing with wind speed 
  ifelse(data$Wind_speed <= 10, 3, 
         ifelse(data$Wind_speed <= 35, 2, 
                ifelse(data$Wind_speed < 50, 1, 0)))

# Final Jauge
gauge(max(data$Quality, na.rm = TRUE), min = 0, max = 9, symbol = ' pts', label = "Sea quality score")
```

### Best wave score
```{r}
highest_score <- max(data$Quality, na.rm = TRUE)

# We use also indices to extract the day and time of the best quality scpre
highest_score_indices <- which(data$Quality== highest_score)
days_highest_score <- data$Day[highest_score_indices]
hours_highest_score <- data$Hour[highest_score_indices]

# Create the second output message
output_message2 <- paste("The highest sea quality score is", highest_score, "pts and and wil next occur on:")

# Reproducibility
for (i in seq_along(highest_wave_indices)) {
  output_message2 <- paste(output_message2, paste(days_highest_score[i], "à", hours_highest_score[i], "heures."), sep = "\n")
}

cat(output_message2)
```

Column {data-width=700}
-----------------------------------------------------------------------

### Quality lot

```{r quality plot}
#Final plot to see to see all the week's scores 
ggplotly(
  ggplot(data, aes(x = Hour, y = Quality)) +
    geom_point(color = "blue") +
    labs(x = "", y = "Quality") +
    facet_grid(~ reorder(Day, Date)) +  # Divise le graphique par jour
    scale_x_discrete(breaks = function(x) x[seq(1, length(x), by = 2)]) +  # Affiche une heure sur deux
    theme(axis.text.x = element_text(angle = 60, hjust = 1)) +
    theme(strip.text = element_text(size = 6))
)
```